<!--  -->
<template>
  <div class="f_page">
    <div class="f_yemian">
      <div class="title">新增供应商</div>
      <div class="zhongbu">
        <el-form ref="ruleForm"
                 :model="form"
                 label-position="left"
                 label-width="200px">
          <!--        <el-form-item label="公司ID"
                        prop="name">
            <el-input v-model="form.ID"></el-input>
          </el-form-item>-->
          <el-form-item label="公司名称"
                        >
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="公司简称"
                        >
            <el-input v-model="form.jianchen" />
          </el-form-item>
          <el-form-item label="联系人"
                        >
            <el-input v-model="form.people" />
          </el-form-item>
          <el-form-item label="手机号"
                        >
            <el-input v-model="form.phone" />
          </el-form-item>
          <el-form-item label="微信号"
                        >
            <el-input v-model="form.wechat" />
          </el-form-item>
          <!--    <el-form-item label="邮箱"
                        >
            <el-input v-model="form.email"></el-input>
          </el-form-item>-->
          <el-form-item label="地址"
                        >
            <el-input v-model="form.site" />
          </el-form-item>
          <el-form-item label="供应区域">
            <el-select v-model="form.shen"
                       placeholder="选择省"
                       @change="qinqiu_shi({zhi:1,id:form.shen})">
              <el-option v-for="item in diqu.shen"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value" />
            </el-select>
            <el-select v-model="form.shi"
                       placeholder="选择市"
                       @change="qinqiu_qu({zhi:2,id:form.shi})">
              <el-option v-for="item in diqu.shi"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value" />
            </el-select>
            <el-select v-model="form.qu"
                       multiple
                       placeholder="选择区">
              <el-option v-for="item in diqu.qu"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="供应类型">
            <el-select v-model="form.leibie"
                       placeholder="选择类型">
              <el-option v-for="item in gy_lx"
                         :key="item.value"
                         :label="item.typeName"
                         :value="item.id" />
            </el-select>
          </el-form-item>

          <el-form-item label="结算周期">
            <el-select v-model="form.zhouqi"
                       placeholder="选择结算周期">
              <el-option v-for="item in zhouqi"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="供应商等级">
            <el-select v-model="form.gy_jb"
                       placeholder="选择供应商等级">
              <el-option v-for="item in gy_jb"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value" />
            </el-select>
          </el-form-item>
        </el-form>
        <div class="shangchuan">
          <div>营业执照</div>
          <el-upload class="avatar-uploader"
                     :action="dizhi"
                     :headers="headers"
                     accept="image/png,image/jpg,image/jpeg"
                     :show-file-list="false"
                     :on-success="zhizhao_tu"
                     :on-error="shibai"
                     :before-upload="beforeAvatarUpload">
            <img v-if="tu.zhizhao"
                 :src="tu.zhizhao"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div class="shangchuan">
          <div>法人身份证人像面</div>
          <el-upload class="avatar-uploader"
                     :action="dizhi"
                     :headers="headers"
                     :show-file-list="false"
                     :on-success="shenfen_tu"
                     :before-upload="beforeAvatarUpload">
            <img v-if="tu.shenfen"
                 :src="tu.shenfen"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </div>
        <div class="shangchuan">
          <div>法人身份证国徽面</div>
          <el-upload class="avatar-uploader"
                     :action="dizhi"
                     :headers="headers"
                     :show-file-list="false"
                     :on-success="shenfen_gh"
                     :before-upload="beforeAvatarUpload">
            <img v-if="tu.shenfen_gh"
                 :src="tu.shenfen_gh"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </div>
        <div class="shangchuan">
          <div>食品流通许可证</div>
          <el-upload class="avatar-uploader"
                     :action="dizhi"
                     :headers="headers"
                     :show-file-list="false"
                     :on-success="liuton_tu"
                     :before-upload="beforeAvatarUpload">
            <img v-if="tu.xuke"
                 :src="tu.xuke"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </div>
        <!--        <div class="shangchuan">
          <div>其它</div>
          <el-upload class="avatar-uploader"
                     action="https://jsonplaceholder.typicode.com/posts/"
                     :show-file-list="false"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl"
                 :src="imageUrl"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>-->
        <el-button class="anniu"
                   type="primary"
                   @click="tijiao('ruleForm')">提交表单</el-button>
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { tu_dizhi, diqu, gonyin_liebiao, gonyin_xz } from "@/api/gonyin.js";
import { getToken } from '@/utils/auth'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
       headers: {
        'token':getToken()
      },
      form: {
        ID: "",
        name: "",
        jianchen: "",
        people: "",
        phone: "",
        wechat: "",
        email: "",
        site: "",
        shen: "",
        shi:"",
        qu: [],
        leibie: [],
        zhouqi: [],
        gy_jb: [],
        token:''
      },
      // rules: {
      //   name: [{ required: true, message: "请输入内容", trigger: "blur" }]
      // },
      tu: { shenfen: "", zhizhao: "", xuke: "", shenfen_gh: "" },
      // 图片上传
      dialogImageUrl: "",
      dialogVisible: false,
      dizhi: "http://sun.xinlinju.net/oss/upload",
      qinqiu: 0,
      qinqiu_id: 1,
      diqu: { shen: [], shi: [], qu: [] },
      gy_lx: [],
      zhouqi: [
        {
          value: 0,
          label: "周"
        },
        {
          value: 1,
          label: "月"
        },
        {
          value: 2,
          label: "季"
        }
      ],
      gy_jb: [
        {
          value: 1,
          label: "一级供应商"
        },
        {
          value: 2,
          label: "二级供应商"
        },
        {
          value: 3,
          label: "三级供应商"
        }
      ]
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created(res) {
    // console.log(this.$route.params);
    this.tu_qinqiu();
    
    // console.log(token,111)
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    //  debugger
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created(res) {
    console.log(this.$route.params);
    /*    this.tu_qinqiu(); */
    this.qinqiu_shen();
    this.qinqiu_leixin();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {},
  //方法集合
  methods: {
    /* 请求 */
    tijiao(ruleForm) {
      let form = this.form;
      let tu = this.tu;
      console.log(form);
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          console.log("通过校验");
           if (form.name == "") {
            this.$message({
              message: "请输入公司名称",
              type: "warning"
            });
          }else if (form.jianchen == "") {
            this.$message({
              message: "请输入公司简称",
              type: "warning"
            });
          }else if (form.people == "") {
            this.$message({
              message: "请输入联系人",
              type: "warning"
            });
          }else if (form.phone == "") {
            this.$message({
              message: "请输入手机号",
              type: "warning"
            });
          }else if (form.wechat == "") {
            this.$message({
              message: "请输入微信号",
              type: "warning"
            });
          }else if (form.site == "") {
            this.$message({
              message: "请输入地址",
              type: "warning"
            });
          }else if (form.shen == "") {
            this.$message({
              message: "请选择供应区域省",
              type: "warning"
            });
          } else if (form.shi == "") {
            this.$message({
              message: "请选择供应区域市",
              type: "warning"
            });
          } else if (form.qu == []) {
            this.$message({
              message: "请选择供应区域区",
              type: "warning"
            });
          } else if (form.leibie == []) {
            this.$message({
              message: "请选择类型",
              type: "warning"
            });
          } else if (form.zhouqi == "" && form.zhouqi !== 0) {
            this.$message({
              message: "请选择结算周期",
              type: "warning"
            });
          } else if (form.gy_jb == "") {
            this.$message({
              message: "请选择供应商级别",
              type: "warning"
            });
          } else if (tu.shenfen == []) {
            this.$message({
              message: "请添加身份证人像面",
              type: "warning"
            });
          } else if (tu.shenfen_gh == []) {
            this.$message({
              message: "请添加身份证国徽面",
              type: "warning"
            });
          } else if (tu.zhizhao == []) {
            this.$message({
              message: "请添加营业执照",
              type: "warning"
            });
          } else if (tu.xuke == []) {
            this.$message({
              message: "请添加许可证",
              type: "warning"
            });
          } else {
            this.tj_biaodan();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      /* console.log(e, "66666666"); */
      /*     let data = {};
      gonyin_list(data).then(response => {}); */
    },
    //提交表单 返回上层
    tj_biaodan() {
      let form = this.form;
      let tu = this.tu;
      let data = {
        company: form.name,
        supplierOwnerName: form.people,
        supplierNameShort: form.jianchen,
        mobile: form.phone,
        supplierWechat: form.wechat,
        address: form.site,
        supplyArea: [form.shen, form.shi, ...form.qu],
        supplierTypeId: form.leibie,
        cycle: form.zhouqi,
        levelId: form.gy_jb,
        runLicense: tu.zhizhao,
        representativeLicense: tu.shenfen,
        representativeLicenseReverse: tu.shenfen_gh,
        foodLicense: tu.xuke
      };
      console.log(data, "表单");
      gonyin_xz(data).then(res => {
        console.log(res);
        if (res.code == 20000) {
          this.$message({
            showClose: true,
            message: "添加供应商成功"
          });
          this.$router.push({
            name: "List"
            /*   params: { id: res.supplierId, zhi: false } */
          });
        }
      });
    },

    //执照图片上传
    zhizhao_tu(res, file) {
      console.log(res,file)
      /* this.imageUrl = URL.createObjectURL(file.raw); */
      this.tu.zhizhao = res.extParams.path;
      console.log(res, "执照上传");
    },
    //身份图片上传
    shenfen_tu(res, file) {
      this.tu.shenfen = res.extParams.path;
      console.log(res, "身份证上传");
    },
    //身份证 正面上传 shenfen_gh
    shenfen_gh(res, file) {
      this.tu.shenfen_gh = res.extParams.path;
      console.log(res, "身份证国徽上传");
    },
    //流通许可上传
    liuton_tu(res) {
      this.tu.xuke = res.extParams.path;
      console.log(res, "许可上传");
    },
    shibai(res) {
      console.log(res, "上传失败");
    },
    beforeAvatarUpload(file) {
      console.log(file, "图片上传");
      const isJPG = file.type == "image/jpeg" || file.type == "image/png";
      const isLt2M = file.size / 1024 / 1024 < 4;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 或者PNG格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 4MB!");
      }
      return isJPG && isLt2M;
    },
    //供应商类型
    qinqiu_leixin() {
      let data = {};
      gonyin_liebiao(data).then(res => {
        console.log(res, "类型");
        this.gy_lx = res.rows;
      });
    },
    //地区请求
    qinqiu_shen() {
      let data = { areaParentId: 1 };
      let token = getToken()
      console.log(token)
      diqu(data).then(res => {
        this.diqu.shen = res.rows;
      });
    },
    qinqiu_shi(e) {
      console.log(e.id, "市请求");
      let data = { areaParentId: e.id };
      diqu(data).then(res => {
        this.diqu.shi = res.rows;
        this.form.shi = [];
        this.form.qu = [];
        console.log(res.rows, "市");
      });
    },
    qinqiu_qu(e) {
      console.log(e.id, "区请求");
      let data = { areaParentId: e.id };
      diqu(data).then(res => {
        this.diqu.qu = res.rows;
        this.form.qu = [];
        console.log(res.rows, "市");
      });
    }
  }, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.f_page {
  display: flex;
  justify-content: center;

  .f_yemian {
    display: flex;
    width: 95%;
    flex-direction: column;
    .title {
      font-size: 20px;
      margin: 20px 0px 20px 20px;
    }
    .zhongbu {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      width: auto;
      height: auto;
      margin-top: 50px;
      .xuanze {
        width: 100px;
      }
      .shangchuan {
        display: flex;
        align-items: center;
        width: 600px;
        padding-left: -200px;
        justify-content: space-between;
        .avatar-uploader {
          border: 1px dashed #777676;
        }
        .avatar-uploader .el-upload {
          border: 1px dashed #353434;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
          background-color: red;
        }
        .avatar-uploader .el-upload:hover {
          border-color: #409eff;
        }
        .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 178px;
          height: 178px;
          line-height: 178px;
          text-align: center;
        }
        .avatar {
          width: 178px;
          height: 178px;
          display: block;
        }
      }
      .anniu {
        margin-top: 50px;
        margin-bottom: 50px;
      }
    }
  }
}
</style>
